import React , { Component ,Fragment } from 'react';

import On from './on.jsx';

class View extends Component {
    constructor(props) {
    super(props);

    this.state = { isOpen: false };
    //Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
    // https://react.docschina.org/docs/refs-and-the-dom.html
    /**
    下面是几个适合使用 refs 的情况：
        管理焦点，文本选择或媒体播放。
        触发强制动画。
        集成第三方 DOM 库。
    */
    this.toggleContainer = React.createRef();

    this.onClickHandler = this.onClickHandler.bind(this);
    this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this);
  }

  componentDidMount() {
    window.addEventListener('click', this.onClickOutsideHandler);
  }

  componentWillUnmount() {
    window.removeEventListener('click', this.onClickOutsideHandler);
  }

  onClickHandler() {
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }));
  }

  onClickOutsideHandler(event) {
    if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {
      this.setState({ isOpen: false });
    }
  }

  render() {
    return (
      <div ref={this.toggleContainer}>
        <button onClick={this.onClickHandler}>Select an option</button>
        {this.state.isOpen && (
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        )}
        <On/>
      </div>
    );
  }
}
export default View;
